<!--
 * @Descripttion: 
 * @Author: jhw
 * @Date: 2023-10-25 11:40:20
 * @LastEditors: jhw
 * @LastEditTime: 2024-06-17 15:49:54
-->
<template>
  <div>
    <h1>table封装</h1>
    <JTable :config="tableConfig" :data="tableData" @pageChange="handlePageChange">
      <template #operation="{ row }">
        <el-button :type="'primary'" link :size="'default'" @click="handleEdit(row)">编辑{{}}</el-button>
        <el-button :type="'primary'" link :size="'default'">删除</el-button>
      </template>
    </JTable>
  </div>
</template>

<script lang="ts" setup>
import JTable from '@/components/JTable/index.vue';
import { ref } from 'vue';
import { TableConfig } from '@/components/JTable/config';

interface ITableData {
  date: string;
  age: number;
  address: string;
  name: string;
  id: number;
}

// 表格配置
const tableConfig = ref<TableConfig<ITableData>>({
  columns: [
    {
      label: 'Date',
      prop: 'date',
      type: 'default',
    },
    {
      label: 'Age',
      prop: 'age',
      type: 'default',
    },
    {
      label: 'address',
      prop: 'address',
      type: 'default',
    },
    {
      label: 'Name',
      prop: 'name',
      type: 'default',
    },
    {
      label: '操作',
      prop: 'slot',
      type: 'slot',
      slotName: 'operation',
    },
  ],
  queryParams: {
    pageNumber: 1,
    pageSize: 10,
  },
  total: 0,
  pageConfig: {},
});

// 展示数据，一般从接口获取
const tableData = ref<Array<ITableData>>([
  {
    date: '2023-10-25',
    age: 18,
    address: '上海市普陀区金沙江路 1518 弄',
    name: '王小虎',
    id: 1,
  },
  {
    date: '2023-10-25',
    age: 18,
    address: '上海市普陀区金沙江路 1518 弄',
    name: '王小虎',
    id: 1,
  },
  {
    date: '2023-10-25',
    age: 18,
    address: '上海市普陀区金沙江路 1518 弄',
    name: '王小虎',
    id: 1,
  },
  {
    date: '2023-10-25',
    age: 18,
    address: '上海市普陀区金沙江路 1518 弄',
    name: '王小虎',
    id: 1,
  },
  {
    date: '2023-10-25',
    age: 18,
    address: '上海市普陀区金沙江路 1518 弄',
    name: '王小虎',
    id: 1,
  },
  {
    date: '2023-10-25',
    age: 18,
    address: '上海市普陀区金沙江路 1518 弄',
    name: '王小虎',
    id: 1,
  },
  {
    date: '2023-10-25',
    age: 18,
    address: '上海市普陀区金沙江路 1518 弄',
    name: '王小虎',
    id: 1,
  },
  {
    date: '2023-10-25',
    age: 18,
    address: '上海市普陀区金沙江路 1518 弄',
    name: '王小虎',
    id: 1,
  },
  {
    date: '2023-10-25',
    age: 18,
    address: '上海市普陀区金沙江路 1518 弄',
    name: '王小虎',
    id: 1,
  },
  {
    date: '2023-10-25',
    age: 18,
    address: '上海市普陀区金沙江路 1518 弄',
    name: '王小虎',
    id: 1,
  },
  {
    date: '2023-10-25',
    age: 18,
    address: '上海市普陀区金沙江路 1518 弄',
    name: '王小虎',
    id: 1,
  },
  {
    date: '2023-10-25',
    age: 18,
    address: '上海市普陀区金沙江路 1518 弄',
    name: '王小虎',
    id: 1,
  },
  {
    date: '2023-10-25',
    age: 18,
    address: '上海市普陀区金沙江路 1518 弄',
    name: '王小虎',
    id: 1,
  },
  {
    date: '2023-10-25',
    age: 18,
    address: '上海市普陀区金沙江路 1518 弄',
    name: '王小虎',
    id: 1,
  },
  {
    date: '2023-10-25',
    age: 18,
    address: '上海市普陀区金沙江路 1518 弄',
    name: '王小虎',
    id: 1,
  },
]);

const handlePageChange = () => {
  console.log('pageChange', { ...tableConfig.value.queryParams });
};

const handleEdit = (row: ITableData) => {
  console.log('编辑', row);
};
</script>
